<template>
  <div class="tronResource flex">
    <!-- 带宽 -->
    <div class="tronResourceList">
      <el-popover
        placement="bottom"
        trigger="hover"
        style="display: inline-block;"
        v-if="resource">
        <div class="cpuPopCent">
          {{$t('myWallet.used')}}{{ resource.net && resource.net.used || 0 }}
          {{$t('tronExchange.bandwidth')}} / {{$t('myWallet.total')}}{{ resource.net && resource.net.total || 0}}{{$t('tronExchange.bandwidth')}}
        </div>
        <div slot="reference">
          <div class="tronResourceNum">
            {{$t('tronExchange.bandwidth')}}：
            <span>{{netPercentage}}%</span>
          </div>
          <div>
            <el-progress :percentage="netPercentage" :color="handleCustomColor(netPercentage)" :show-text="false"></el-progress>
          </div>
        </div>
      </el-popover>
    </div>
    <!-- 能量 -->
    <div class="tronResourceList">
      <el-popover
        placement="bottom"
        trigger="hover"
        style="display: inline-block;"
        v-if="resource">
        <div class="cpuPopCent">
          {{$t('myWallet.used')}}{{ resource.energy && resource.energy.used || 0}}
          {{$t('tronExchange.energy')}} / {{$t('myWallet.total')}}{{ resource.energy && resource.energy.total || 0}}{{$t('tronExchange.energy')}}
        </div>
        <div slot="reference">
          <div class="tronResourceNum">
            {{$t('tronExchange.energy')}}：
            <span>{{energyPercentage}}%</span>
          </div>
          <div>
            <el-progress :percentage="energyPercentage" :color="handleCustomColor(energyPercentage)" :show-text="false"></el-progress>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { EosModel } from '@/utils/eos';

export default {
  name: 'tronResource', // 波场资源
  data() {
    return {
      resource: {},
      netPercentage: 0,
      energyPercentage: 0,
      getResourceTimer: false,
    }
  },
  components: {},
  props: {},
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.handleGetResource();
  },
  beforeDestroy() {
    if (this.getResourceTimer) {
      clearTimeout(this.getResourceTimer);
    }
  },
  methods: {
    // 获取资源信息
    handleGetResource() {
      EosModel.getAccountResources((res) => {
        if (res === 'error') {
          this.netPercentage = 100;
          this.energyPercentage = 100;
          return;
        }
        if (res !== 'error') {
          this.resource = res;
          if (res.net.used === 0 && res.net.total === 0) {
            this.netPercentage = 100;
          }
          if (res.net.used === 0 && res.net.total !== 0) {
            this.netPercentage = 0;
          }
          if (res.energy.used === 0 && res.energy.total === 0) {
            this.energyPercentage = 100;
          }
          if (res.energy.used === 0 && res.energy.total !== 0) {
            this.energyPercentage = 0;
          }
          if (res.net.total) {
            this.netPercentage = Number(((res.net.used / res.net.total) * 100).toFixed(1));
          }
          if (res.energy.total) {
            this.energyPercentage = Number(((res.energy.used / res.energy.total) * 100).toFixed(1))
          }
        }
        if (this.getResourceTimer) {
          clearTimeout(this.getResourceTimer);
        }
        this.getResourceTimer = setTimeout(() => {
          this.handleGetResource();
        }, 3000)
      });
    },
    handleCustomColor(val) {
      if (val < 60) {
        return '#67c269';
      } else if (val <= 80) {
        return '#FF9800';
      }
      return '#E51C23';
    },
  },
}
</script>
<style lang="scss" scoped>
.tronResource {
  .tronResourceList {
    margin-right: 25px;

    .tronResourceNum {
      margin-bottom: 4px;
      span {
        color: #333;
      }
    }

    /deep/ .el-progress-bar__outer {
      height: 4px !important;
      background: #dadde0;
    }
  }
}

.theme-1B1D27 {
  .tronResourceList {
    margin-right: 25px;

    .tronResourceNum {
      margin-bottom: 4px;
      span {
        color: #7b8db9 !important;
      }
    }
  }
}
</style>

